<template>
	<view :style="{overflow:'hidden',height: pageHeight}">
		<!-- 搜索框 -->
		<seach @seach="Scroll"/>
		<!-- 焦点图 -->
		<view class="banner">
			<swiper>
				<swiper-item v-for="item in list" :key="item.goods_id">
					<navigator :ur="item.navigator_url">
						<image :src="item.image_src"></image>
					</navigator>
				</swiper-item>
			</swiper>
		</view>
		<!-- 主导航 -->
		<view class="navs">
			<view  v-for="item1 in navs" :key="item1.id">
				<navigator :url="item1.navigator_url" :open_type="item1.switchTab">
					<image :src="item1.image_src"/>
				</navigator>
			</view>
		</view>
		<!-- 楼层 -->
		<view class="froter">
				<view class="floor" v-for="(item, index) in floorList" :key="index">
					<view class="froter_tite"> 
						<image :src="item.floor_title.image_src"></image>
					</view>
					<view class="froter_content">
						<navigator url="" v-for="(item1, index) in item.product_list " :key="index">
							<image :src="item1.image_src"></image>
						</navigator>
					</view>
				</view>
				</view>
		<!-- 回到顶部 -->
		 <view class="goTop" @click="goTop()" v-if="scrollTop > 0">I</view>
	</view>
</template>

<script>
import seach from '../../components/seach'
	export default {
		data() {
			return {
				// 轮播图
				list:[],
				// 主导航
				navs:[],
				// 楼层
				floorList:[],
				
				pageHeight:'auto',
				scrollTop:0
			}
		},
		components :{
			seach
		},
		onLoad() {
			this.getlunbo(),
			this.getNavs(),
			this.getFloor()
		},
		async onPullDownRefresh () {
			await this.getlunbo(),
			await this.getNavs(),
			await this.getFloor()
			
			uni.stopPullDownRefresh();
		},
		onPageScroll (ev) {
			// console.log(ev)
			this.scrollTop = ev.scrollTop
		},
		
		methods: {
			// 轮播图
			async getlunbo() {
				const {message}	= await this.http({
						url: '/api/public/v1/home/swiperdata', 
						method:'GET'
						});
						this.list=message
			},
			// 主导航
			async getNavs(){
					const {message}	= await this.http({
						url: '/api/public/v1/home/catitems', 
						method:'GET'
						});
					this.navs=message
					
			},
			// 尾部
			async getFloor() {
				const {message}= await this.http({
					url: '/api/public/v1/home/floordata', 
					method:'GET'
					});
				this.floorList=message
				console.log	(this.floorList)
			},
			
			Scroll (ev) {
				this.pageHeight=ev.pageHeight;
				console.log(ev)
			},
		    // 回到顶部
			goTop() {
				uni.pageScrollTo({
					scrollTop: 0,
					  duration: 300
				})
			}
		},
	

	}
</script>

<style lang="less">


// 焦点图
.banner{
	
		navigator{
			width: 750rpx;
			height: 340rpx;	
			}
	
}

// 主导航
.navs {
	height: 195rpx;
	background-color: #fff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 28rpx;
	
	navigator {
		width: 128rpx;
		height: 128rpx;
	}
}

// 尾部
.floor {

	.froter_tite {
		width: 750rpx;
		height: 60rpx;
		padding: 30rpx 0 0 10rpx;
	}
	.froter_content {
		overflow: hidden;
		margin: 20rpx 16rpx;

		navigator{
			float: left;
			margin-left: 10rpx;
		}

		navigator:first-child {
			width: 233rpx;
			height: 368rpx;
			margin-left: 0rpx;
			
		}

		navigator:nth-child(2),
		navigator:nth-child(5){
			width: 273rpx;
			height: 188rpx;
		}
		navigator:nth-child(3),
		navigator:nth-child(4){
			width: 193rpx;
			height: 188rpx;
		}
		navigator:nth-last-child(-n+2){
			margin-top: 10rpx;
		}

		
	}
	&:first-child{
		.froter_content {
			navigator {
				width: 233rpx;
				height: 188rpx;
			}
			navigator:first-child {
				width: 233rpx;
				height: 368rpx;
			}
		}
		
		
	}
}

// 回到顶部

.goTop {
    position: fixed;
    bottom: 30rpx;
    /* #ifdef H5 */
    bottom: 65px;
    /* #endif */
    right: 30rpx;
  
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100rpx;
    height: 100rpx;
    font-size: 48rpx;
    color: #666;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.8);
  }
</style>